<div class="content">
    <div id="example_title">
        <h1>Content Messages</h1>
        Content messages only lock the content (div) you specify. This div needs to be position: relative|absolute.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<style>
#custom {
    position: relative;
    width: 800px;
    height: 350px;
    font-size: 18px;
    color: #777;
    padding: 50px;
    line-height: 1.5;
    background-color: #f5f5f5;
}
#custom button {
    margin-left: 0;
}
</style>
<div id="custom">
    Belarus,[a] officially the Republic of Belarus,[b] is a landlocked country in Eastern Europe. It is bordered by Russia to the
    east and northeast, Ukraine to the south, Poland to the west, and Lithuania and Latvia to the northwest. Covering an area of
    207,600 square kilometres (80,200 sq mi) and with a <i>population of 9.4 million</i>, Belarus is the thirteenth-largest and the
    twentieth-most populous country in Europe. The country is administratively divided into seven regions. Minsk is the capital
    and largest city.
    <div style="height: 20px"></div>
    <button class="w2ui-btn" onclick="action('Action!')">Action</button>
</div>

<div style="height: 20px;"></div>
<button class="w2ui-btn" onclick="contextAlert()">Alert</button>
<button class="w2ui-btn" onclick="contextConfirm()">Confirm</button>
<button class="w2ui-btn" onclick="contextPrompt()">Prompt</button>

<!--CODE-->
<script type="module">
import { w2utils, query } from '__W2UI_PATH__'

window.contextAlert = function() {
    w2utils.alert({
            box: '#custom',
            text: 'Some message'
        })
        .ok(event => {
            console.log('Ok clicked', event)
        })
}

window.contextConfirm = function() {
    w2utils.confirm({
            box: '#custom',
            text: 'Some message'
        })
        .yes(event => {
            console.log('Yes', event)
        })
        .no(event => {
            console.log('No', event)
        })
}

window.contextPrompt = function() {
    // w2utils.message({ box: '#custom', text: 'message', actions: ['Save'] }).save(() => { w2utils.message({ box: '#custom' })})
    // return
    w2utils.prompt({
            box: '#custom',
            label: 'Enter Value',
            textarea: false,
            attrs: 'placeholder="Enter here..."'
        })
        .ok(event => {
            console.log('OK:', event.detail.value)
        })
        .cancel(event => {
            console.log('Cancel')
        })
        .change(event => {
            // console.log('Input changed', event)
        })
}

window.action = (msg) => {
    w2utils.message({ box: '#custom', text: msg })
}
</script>